import { Switch, ConfigProvider } from "antd";
import { Button, Form, Input } from "antd";
import { getSwitch } from "@/hooks/tool";
import { useSelector, useDispatch } from "react-redux";
import { useState } from "react";
import { loginById } from "@/api/login";
import { useNavigate } from "react-router-dom";
import { storeSetToken, storeSetUserInfo } from "@/store";

import "./index.scss";

const LoginFrom = () => {
  const [userInfo, setUserInfo] = useState({
    userId: "18715759214",
    password: "Szxc@2024",
  });
  const navigate = useNavigate();
  const storeUserInfo = useSelector((state) => {
    return state.userInfo;
  });
  const token = useSelector((state) => {
    return state.token;
  });
  const dispatch = useDispatch();
  const onFinish = (values) => {
    login(values);
  };
  const login = (from) => {
    loginById(from).then((res) => {
      if (res.code === 0) {
        dispatch(storeSetToken(res.token));
        dispatch(storeSetUserInfo(res.user));
        navigate("/operate", { replace: false });
      }
    });
  };
  return (
    <Form
      name="basic"
      style={{
        width: 415,
        marginTop: 60,
      }}
      onFinish={onFinish}
      initialValues={userInfo}
    >
      <Form.Item
        label=""
        name="userId"
        rules={[
          {
            required: true,
            message: "请输入账号",
          },
        ]}
      >
        <Input
          className="input-userId"
          style={{
            background: "transparent",
            borderColor: "rgba(87, 88, 92, 1)",
          }}
          prefix={<span className="icon-login-user"></span>}
        />
      </Form.Item>
      <Form.Item
        label=""
        name="password"
        rules={[
          {
            required: true,
            message: "请输入密码",
          },
        ]}
      >
        <Input.Password
          className="input-password"
          style={{
            background: "transparent",
            borderColor: "rgba(87, 88, 92, 1)",
          }}
          visibilityToggle={false}
          prefix={<span className="icon-login-lock"></span>}
        />
      </Form.Item>
      <Form.Item>
        <Button
          style={{
            width: "100%",
            background: "rgba(0, 99, 206, 1)",
            color: "white",
          }}
          type="primary"
          htmlType="submit"
        >
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

function LeftBox() {
  return <div className="left-box"></div>;
}

function RightBox() {
  const theme = useSelector((state) => state.theme);
  return (
    <div className="right-box">
      <div className="login-container">
        <ConfigProvider
          theme={{
            cssVar: true,
            token: {
              colorText: theme ? "balck" : "white",
            },
          }}
        >
          <LoginFrom></LoginFrom>
        </ConfigProvider>
      </div>
    </div>
  );
}

function ThemeSwitch() {
  const dispatch = useDispatch();
  const  theme  = useSelector((state) => state.theme);
  
  const switchChange = (checked) => {
    getSwitch(checked, dispatch);
  };

  return (
    <div className="theme-switch">
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#0063ce",
          },
        }}
      >
        <Switch value={theme} className="switch-btn" onChange={switchChange} />
      </ConfigProvider>
    </div>
  );
}

export default function Login() {
  return (
    <section className="container">
      <ThemeSwitch></ThemeSwitch>
      <LeftBox></LeftBox>
      <RightBox></RightBox>
    </section>
  );
}
